<template>
  <div>
  <div class="block">
    <el-carousel height="500px" :interval="4000" type="card">
      <el-carousel-item v-for="item in imagebox" :key="item.id">
        <img :src="item.idView" class="image" style="object-fit:scale-down;width: 100%;height: 100%">
      </el-carousel-item>
    </el-carousel>
    </div>
    <div>
      <ul>
        <li v-for="v in list">
          <div class="module">
            <div style="display: inline-block;" class="text">
              <span style="font-size: xx-large;display: inline-block;margin: 10px">{{ v.name }}</span><br>
              <span style="font-family: '宋体'">{{v.story}}</span>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "ChineseMeal",
  data() {
    return {
      imagebox: [
        {id: 0, idView: require('../assets/images/c.jpg')},
        {id: 1, idView: require('../assets/images/l.jpg')},
        {id: 2, idView: require('../assets/images/k.jpg')},
        {id: 3, idView: require('../assets/images/za.jpg')},
        {id: 4, idView: require('../assets/images/ze.jpg')}
      ],
      list:[
        {name:"炒",story:"炒是最广泛使用的一种烹调方法。适用于炒的原料，多系经刀工处理的小型丁、丝、条、球等。炒用小油锅，油量多少视原料而定。操作时，先将锅烧热，再下油，一般用旺火热油，但火力的大小和油温的高低要根据原料而定。操作时，依次下料，用手勺和铲翻拌，动作要敏捷，原则是断生即好。它的特点是脆、嫩、滑。具体方法可分生炒、熟炒、软炒、干炒等四种。"},
        {name:"蒸",story: "又一基本方法。分大火沸水速蒸；大火沸水慢慢蒸，“越是弥足珍贵的美味，外表看上去，往往越是平平无奇。”蒸出来的菜肴，或许没有烈火烹制而成的那样鲜亮好看，但那接近食材本真的味道，远比众多调料堆砌而成的香味更容易打动食客的味蕾。简单、纯粹，就是“蒸”的奥义。"},
        {name:"炸",story:"炸，即将油用旺火烧滚(只七、八成熟)，将食物下锅。一般油比原料多数倍（俗称大烟锅）。此时，火不宜猛，应适时翻动，严防过老或不熟，炸成焦黄色即可。有的大块原料要复炸。炸食特点为香酥脆嫩，但对保持营养素不利，也不易消化，不宜多采用。常用炸法有清炸、干炸、软炸、酥炸、纸包炸及其他炸法等。"},
        {name:"烤",story:"中国饮食、烹饪经过了四个发展阶段，其中是：火烹、石烹、水烹、油烹。火烹是最原始的烹调方法。火烹最原始的操作方法就是烧、烤。烧烤，是指肉及肉制品置于木炭或电加热装置中烤制的过程。一般来说，烧烤是在火上将食物（多为肉类，海鲜，蔬菜）烤熟，烹调至可食用；现代社会，由于人类发明了多种用火方式，烧烤方式也逐渐多样化，发展出各式烧烤炉、烧烤架、烧烤酱、锡纸等烧烤用品。"},
        {name:"卤",story:"卤菜共分为红卤系列、盐焗系列、麻辣系列、泡椒系列、烤鸭系列、酱香系列、五香系列、海鲜系列、凉拌系列等9大系列。它经过腌制、风晒、煮焖或卤制后，经刀工处理，简单包装，即可食用，特点是干香、脆嫩、酥烂、爽滑、无汤、不腻、色泽光亮、食用方便、便于携带，备受人们的喜爱。"}
      ],
      screenWidth :0
    }
  },
  methods: {}
}
</script>

<style scoped>
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}

.block {
  margin-top: 80px;
}

.el-carousel__item:nth-child(2n) {
  background-color: #698E6A;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #A35F65;
}

.module{
  display: block;
  width: 90%;
  height: 150px;
  border: solid 2px black;
  margin: 20px;
}

.text{
  width: 85%;
  position: absolute;
}
</style>
